<template>
	<view class="father">
		<view class="playlist" v-for="p in playListDetail.songs" @click="playSong(p.id)">
			<image :src="p.al.picUrl"></image>
			<view class="writing">
				<text>{{p.name}}</text>
				<text>{{p.al.name}}</text>
			</view>
		</view>
		
		<view class="container">
			<uni-fab ref="fab" :pattern="pattern" :content="content" :horizontal="horizontal" :vertical="vertical"
				:direction="direction" @trigger="trigger" @fabClick="fabClick" />
		</view>
		
	</view>

</template>

<script>
	const audio = uni.createInnerAudioContext();
	export default {
		components: {},
		data() {
			return {
				playLists: {},
				playListDetail: {},
				songUrl: '',
				index: 0,
				/*  */
				title: 'uni-fab',
				directionStr: '垂直',
				horizontal: 'left',
				vertical: 'bottom',
				direction: 'horizontal',
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#aaa',
					iconColor: '#fff',
					icon: 'headphones'
				},
				play: {
					iconPath: '/static/pause.png',
					selectedIconPath: '/static/pause.png',
					text: '播放',
					active: false
				},
				pause: {
					iconPath: '/static/play.png',
					selectedIconPath: '/static/play.png',
					text: '暂停',
					active: false
				},
				is_color_type: false,
				content: [{
						iconPath: '/static/previous.png',
						selectedIconPath: '/static/previous.png',
						text: '上一首',
						active: false
					},
					{
						iconPath: '/static/pause.png',
						selectedIconPath: '/static/pause.png',
						text: '播放',
						active: false
					},
					{
						iconPath: '/static/next.png',
						selectedIconPath: '/static/next.png',
						text: '下一首',
						active: false
					}
				]
			}
		},
		created() {
			this.getPlayList();
			this.getPlayListAll(2520739691);
		},
		onBackPress() {
			if (this.$refs.fab.isShow) {
				this.$refs.fab.close()
				return true
			}
			return false
		},
		methods: {
			// 获取推荐歌单
			getPlayList() {
				uni.request({
					url: 'http://127.0.0.1:3000/personalized', //仅为示例，并非真实接口地址。
					success: (res) => {
						this.playLists = res.data;
						console.log(this.playLists)
					}
				});
			},
			// 获取歌单所有歌曲
			getPlayListAll(pid) {
				uni.request({
					url: 'http://127.0.0.1:3000/playlist/track/all?id=' + pid, //仅为示例，并非真实接口地址。
					success: (res) => {
						this.playListDetail = res.data;
						console.log(this.playListDetail)
						console.log(this.playListDetail.songs.length);
						// this.songUrl="https://music.163.com/song/media/outer/url?id="+res.data.songs[0].id + ".mp3";					
					}
				});
			},
			playSong(url) {
				this.songUrl = "https://music.163.com/song/media/outer/url?id=" + url + ".mp3";
				audio.autoplay = true;
				audio.src = this.songUrl;
				audio.play();
				audio.onError((res) => {
					console.log(res.errMsg);
					console.log(res.errCode);
				});
			},
			pauseSong() {
				audio.pause();
			},
			backgroundSong() {
				this.songUrl = "https://music.163.com/song/media/outer/url?id=" + this.playListDetail.songs[this.index]
					.id + ".mp3";
				audio.autoplay = true;
				audio.src = this.songUrl;
				audio.play();
			},
			nextSong() {
				if (this.index < this.playListDetail.songs.length) {
					this.index = this.index + 1;
				} else {
					this.index = 0;
				}

				this.songUrl = "https://music.163.com/song/media/outer/url?id=" + this.playListDetail.songs[this.index]
					.id + ".mp3";
				audio.autoplay = true;
				audio.src = this.songUrl;
				audio.play();
			},
			previousSong() {
				if (this.index > 0) {
					this.index -= 1;
				} else {
					this.index = 0;
				}
				this.songUrl = "https://music.163.com/song/media/outer/url?id=" + this.playListDetail.songs[this.index]
					.id + ".mp3";
				audio.autoplay = true;
				audio.src = this.songUrl;
				audio.play();
			},
			trigger(e) {
				console.log(e.item)
				if (e.item.text == "暂停") {
					this.pauseSong();
					this.content[1] = this.play;
					return;
				}
				if (e.item.text == "播放") {
					this.content[1] = this.pause;
					this.backgroundSong();

				}
				if (e.item.text == "上一首") {
					this.previousSong();
				}
				if (e.item.text == "下一首") {
					this.nextSong();
				}
			},
			// switchBtn(hor, ver) {
			// 	if (hor === 0) {
			// 		this.direction = this.direction === 'horizontal' ? 'vertical' : 'horizontal'
			// 		this.directionStr = this.direction === 'horizontal' ? '垂直' : '水平'
			// 	} else {
			// 		this.horizontal = hor
			// 		this.vertical = ver
			// 	}
			// 	this.$forceUpdate()
			// },
			// switchColor() {
			// 	this.is_color_type = !this.is_color_type
			// 	if (this.is_color_type) {
			// 		this.pattern.iconColor = '#aaa'
			// 		this.pattern.buttonColor = '#fff'
			// 	} else {
			// 		this.pattern.iconColor = '#fff'
			// 		this.pattern.buttonColor = '#007AFF'
			// 	}
			// },
			// switchIcon() {
			// 	if (this.pattern.icon == 'plus') {
			// 		this.pattern.icon = 'plusempty'
			// 	} else {
			// 		this.pattern.icon = 'plus'
			// 	}
			// }
		}
	}
</script>

<style lang="scss">
	.warp {
		padding: 10px;
	}

	.button {
		margin-bottom: 10px;
	}

	.father {
		display: flex;
		flex-direction: column;
	}

	.playlist {
		display: flex;
		margin-bottom: 10px;
	}

	.writing {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
</style>